<script setup>
import { Edit ,Delete} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ElMessageBox,ElMessage } from 'element-plus';
import { deletePatientAPI} from '@/api/user';

// 全局路有对象
const router = useRouter()

// 接收父组件参数
const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    },
    isDelete: {
        type: Boolean,
        default: false
    }
})

// 触发页面更新
const emit = defineEmits(['update'])

// 编辑就诊人
const editPatient = (id) => {
    router.push({
        path: '/user/patient-add',
        query: {
            id,
            fullPath: router.currentRoute.value.fullPath
        }
})
}

// 删除就诊人
const deletePatient =(id) => {
    ElMessageBox.confirm("确定要删除该就诊人吗？", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async() => {
        // 删除就诊人
        const res = await deletePatientAPI(id)
        if(res.code === 200) {
            ElMessage.success('删除成功')
            emit('update','')
        }
        
    }).catch(() => {
        // 取消删除
    })
    
}
</script>
<template>
    <div class="user">
        <div class="top">
            <div class="left">
                <span class="free">{{ props.data.isInsure === 1 ? '医保' : '自费' }}</span>
                <span class="name">{{props.data.name}}</span>
            </div>
            <div class="right" v-if="!isDelete">
                <el-button type="primary" size="default" :icon="Edit" @click="editPatient(props.data.id)">编辑</el-button>
            </div>
            <div class="right" v-if="isDelete">
                <el-button type="primary" size="large" :icon="Edit" circle @click="editPatient(props.data.id)"></el-button>
                <el-button type="danger" size="large" :icon="Delete" circle @click="deletePatient(props.data.id)"></el-button>
            </div>
        </div>
        <div class="bottom">
            <p>证件类型： <span>{{ props.data.param?.certificatesTypeString }}</span></p>
            <p>证件号码： <span>{{props.data.contactsCertificatesNo}}</span></p>
            <p>用户性别： <span>{{props.data.sex=== 0? "女" : '男'}}</span></p>
            <p>出生日期： <span>{{ props.data.birthdate }}</span></p>
            <p>手机号码： <span>{{ props.data.phone }}</span></p>
            <p>婚姻状况： <span>{{props.data.isMarry === 0 ? '未婚' : '已婚'}}</span></p>
            <p>当前住址： <span>{{ props.data.param.provinceString + props.data.param.cityString+ props.data.param.districtString }}</span></p>
            <p>详细地址： <span>{{ props.data.address }}</span></p>
            
        </div>
    </div>
</template>



<style lang="scss" scoped>
.user  {
    width: 100%;
    margin: 0 10px;
    border-radius: 10px;
    margin-top: 10px;
    box-shadow: 0 0 12px rgba(0,0,0,.12) ;
    // padding-left: 20px;
    .top {
        width: 100%;
        height: 60px;
        background-color: #efefef;
        display: flex;
        align-items: center;
        justify-content: space-around;
        
        .left {
            padding: 0;
            margin: 0;
            .free {
                background-color: #fff;
                padding: 5px;
                margin-right: 10px;
                border-radius: 5px;

            }
            .name {
                font-size: 20px;
                color: #7f7f7f;
                font-weight: 700;
            }
        }
    }
    .bottom {
        padding-left: 30px;
        border-radius: 0 0 10px 10px;
        background-color: #fff;
        p {
            line-height: 30px;
            &:last-child {
                border-radius: 0 0 10px 10px;

            }
            span {
                margin-left: 10px;
            }
        }
    }
}
</style>